<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
	<title>商品列表</title>
	<link rel="stylesheet" href="./css/list.css" type="text/css" />
</head>
<body>
	<%@ include file="header.jsp" %>

	<form action="" method="post">		<!-- 表单提交给对应的Servlet类GoodsList -->

	
	<h3>小说列表</h3>
	
  	<c:if test="${ novelList.size()  > 0 }">		<%-- 这里使用了jstl标签 --%>
		<div class="divGrid">
		<table style="width:900px; margin:0px auto;" class="table_border table_border_bg table_hover">
			<tr class="tr_header">
				<td style="width:46px;">序号</td>
				<td>名称</td>
				<td>简介</td>
				<td style="width:95px;">详情/修改</td>
				<td style="width:46px;">选择</td>
			</tr>
			
			<c:forEach var="novel" items="${ novelList }" varStatus="status">
				<tr>
					<td class="note">${status.index + countShowed + 1 }</td>
					<td style="font-weight:bold; text-align:left; text-align: center">
						<a href="novelInfoServlet?novelNumber=${ novel.novelNumber }" style="text-decoration:none;">
							<img src="novelImage/${ novel.novelImage }" alt="无图"
								 onerror="this.style.display='none'; this.src='fileUpload/goodsImage/1.png'"
								 style="width:100px; vertical-align:middle;">		<!-- 如果图片加载失败则不显示 -->
							<span style="display:inline-block; width:200px;
									white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align: middle;">
									&ensp;${ novel.novelName }</span></a></td>
					<td>${ novel.novelIntroduce }</td>
					<td>
						<a href="novelInfoServlet?novelNumber=${ novel.novelNumber }" title="详情">
							<img src="image/icon_show.gif" border="0" /></a>&emsp;
						<a href="novelEdit?novelNumber=${ novel.novelNumber }" title="修改">
							<img src="image/icon_edit.gif" border="0" /></a>
					</td>
					<td>
						<input type="checkbox" name="novelNumber" value="${ novel.novelNumber  }">
					</td>
				</tr>
			</c:forEach>
			  
			<tr>
				<td colspan="8" class="note" style="text-align:right; height:50px;">
					（<a href="novelAdd">新添小说</a>）
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					<input type="submit" name="buttonDelete" value="删除" 
						onclick="return confirm('确认删除所选记录？');">
					&emsp;
					<label>全选:<input type="checkbox" name="checkboxAll" 
						onchange="checkAll()"></label>&emsp;
				</td>
			</tr>
		</table>
		</div>
		
		<div style="width:900px; margin:0px auto;">
			${ page }
		</div>
  	</c:if>
	</form>
		
	<div id="msg" class="msg">${ msg }</div>
	
	<%@ include file="footer.jsp" %>
</body>
<script type="text/javascript">
function checkAll() {
	var checkboxList = document.getElementsByName("novelNumber");			//获取复选框列表
	var checkboxAll  = document.getElementsByName("checkboxAll")[0];	//全选复选框
	
	for (var i = 0; i < checkboxList.length; i++) {						//对于列表中的每一个复选框
		checkboxList[i].checked = checkboxAll.checked;					//此复选框的勾选情况与全选复选框一致
	}
}
</script>
</html>
